<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no"/>
<title>{$praiseContent['title']}</title>
<link href="/Public/css/maint_eat.css?v=1" type="text/css" rel="stylesheet" />
<link href="/Public/css/font.css" type="text/css" rel="stylesheet" />
<link href="/Public/css/bootstrap/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="/Public/js/jquery-1.7.1.min.js"></script>
<script src="/Public/js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="/Public/js/jquery.masonry.min.js"></script>
<script type="text/javascript" src="/Public/js/common.js"></script>
<script type="text/javascript" src="/Public/js/page.js?v=7"></script>
<script type="text/javascript" src="/Public/js/main.js?v=1"></script>

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<style>
    .pSkillBar > div{
        float: left;
    }
    .cur-vote{
        position: relative;
    }
    .cur-vote .num{
        float: left;
    }
    .num.none{
        display: none;
    }

    .cur-vote .num-effect{
        float: none;
        position: absolute;
        top:0;
        right:0;
        /*width: 10px;*/
        height: 100%;
        /*background-color: rgba(32,255,192,.3);*/
    }
    .cur-vote .num-effect .effect-num{
        position: absolute;
        color: #ff0000;
        top:0;
        right:0;
    }
    .weixinAlert.borderRadius.erweima{
        height: auto;
    }

    .weixinAlert.borderRadius.erweima p.pVote{
        height: auto;
        padding: auto;
        padding-left: 10px;
    }

    .weixinAlert.borderRadius.erweima div.voteSure{
        margin: 10px auto;
    }

</style>

</head>	
<body>
<div class="mask"></div>
<div class="share"></div>
<input type="hidden" value="{$result['id']}" id="item_id">
<div id="main">
	<div class="contBox1">
        <div class="contentTitle" style="margin-bottom:0px;"><a href="{:U('Wap/praiseeat/index', array('praise'=>$praise))}" target="_self"><span class="icon iconfont icon-fanhui backBtn"></span></a><p>{$result['grade']}号：{$result['show_name']}</p></div>
        <div class="commentImg">
            <img src="{$result['pic']}"  class="contentImg">
            <div class="barragediv">
                <?php
                foreach($comments as $key=>$comment){
                        if($key < 10){
                            echo"<span>" . $comment['content']  . "</span>";
                        }
                    }
                ?>
            </div>
            <div class="barrageBtn barrage"></div>
        </div>

    <div class="alert alert-warning" style="display: none">
        <a href="#" class="close" onclick="remove_alert();">
            &times;
        </a>
        <strong>您已提交评论，待审核</strong>
    </div>
    <div class="divConBtn bot10">
        <div class="divPadding">
            <span class="zpName">{$result['show_name']}</span>
            <div class="divHeart">
                <div class="heart"></div>
                <span class="heartFont" id="votes">{$result['votes']}</span>
            </div>
        </div>
    </div>
    <div class="commentBox">
        <h1 class="h1Comment">评论区</h1>
        <?php
            foreach($comments as $comment){
                echo "<div class='divcomment'><span class='commentName'>游客" . $comment['id'] . "</span><p>";
                    echo $comment['content'];
                    echo "</p></div>";
            }
        ?>
    </div>
    </div>
    <div class="commentBtn">评论</div>
    <div class="commentTextarea">
        <h1><span class="spanClose"></span>评论</h1>
        <textarea class="commentText" placeholder="请输入评论" id="commentText"></textarea>
        <div class="commentbtn"><input type="button" value="发送" class="sendBtn"/><span class="surplus">(还能输入<span class="commentnNum">70</span>字)</span></div>
        <div class="toast">超出字数限制</div>
    </div>
    <!-------------Content END------------------------->

</div>
<div class="modal fade" style="margin-top:50%;" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    填写手机号码有机会获得精美奖品
                </h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" id="connect" >
                    <input type="hidden" name="id" value="" id="id">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">手机号码</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="telephone" id="telephone" placeholder="请输入手机号码">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" onclick="update_data();">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script type="text/javascript">	
page.praise.init( { followLink: "{$followLink}", openid: "{$openid}" } );
</script>
<script type="text/javascript">
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '{$wxuser["appid"]}', // 必填，公众号的唯一标识
            timestamp: "{$timestamp}", // 必填，生成签名的时间戳
            nonceStr: '{$nonceStr}', // 必填，生成签名的随机串
            signature: '{$wxSha1}',// 必填，签名，见附录1
            jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        wx.error(function(res){
            //console.log(res);
    		// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });
        wx.ready( function( e ){
            wx.onMenuShareAppMessage({
                title: "{$share_title}", // 分享标题
                desc: "{$share_desc}", // 分享描述
                link: location.protocol + "//" + window.location.hostname + "/index.php?m=wap&c=praiseeat&a=fetch_one&praise={$praise}&id={$result['id']}", // 分享链接
                imgUrl: "{$share_pic}", // 分享图标

                type: 'link', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
            wx.onMenuShareTimeline({
                title: "{$share_title}", // 分享标题
                desc: "{$share_desc}",
                link: location.protocol + "//" + window.location.hostname + "/index.php?m=wap&c=praiseeat&a=fetch_one&praise={$praise}&id={$result['id']}", // 分享链接
                imgUrl: "{$share_pic}", // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
        })
		   

</script>

<script type="text/javascript">
    $('body').on("click",'.heart',function(){
        if(!$(this).hasClass("heartAnimation")){
            $(this).addClass("heartAnimation");
            console.log("heart");
            var praise = "{$praise}";
            $.ajax({
                type:'post',
                dataType:'json',
                url:'/Wap/PraiseItemRecord/eatadd',
                async: false,
                data:{
                    item: $("#item_id").val(),
                    praise: praise
                },
                success:function(){
                }
            });
            var votes = Number($("#votes").text()) + 1;
            console.log(votes);
            $("#votes").text(votes);
        }
    });
    function update_data(){
        if($("#telephone").val() == ""){
            $("#myModal1").modal("hide");
            $("#id").val("");
            $("#telephone").val("");
        }else{
            $.ajax({
                type:"post",
                data:{
                    id:$("#id").val(),
                    telephone:$("#telephone").val()
                },
                async: false,
                dataType:"json",
                url:"/Wap/Praiseeat/update_item_comment?praise=" + "{$praise}",
                success:function(res){

                }
            });
            $("#myModal1").modal("hide");
            $("#id").val("");
            $("#telephone").val("");
        }

    }
    $(document).ready(function(){
        $(".commentText").bind('input propertychange', function() {
            var curLength=$(".commentText").val().length;
            if(curLength>70){
                var text=$(".commentText").val().substr(0,69);
                $(".commentText").val(text);

            }
            else{
                $(".commentnNum").text(70-curLength);
            }
        });
        $(".spanClose").click(function(){
            $(".commentTextarea").css('display', 'none');
            $(".commentText").val("");
            $(".commentnNum").text(70);
        });
        $(".commentBtn").click(function(){
            $(".commentTextarea").css('display', 'block');
        });
        $(".barrage").click(function(){
            $(this).toggleClass("nobarrage");
            $(".barragediv").toggleClass("nobarragediv");
        });

    });
    var _top=0;
    $(".commentImg").find("span").show().each(function(){
        var _left=$(".contentImg").width()-$(this).width()+220;
        var _height=$(".contentImg").height();
        _top=_top+40;
        if(_top>=_height-20){
            _top=0;
        }
        $(this).css({left:_left,top:_top});
        var time=15000;
        if($(this).index()%2==0){
            time=30000;
        }
        if($(this).index()%3==0){
            time=40000;
        }
        $(this).animate({left:"-"+_left+"px"},time,function(){

        });

    });
    function remove_alert(){
        $(".alert").css("display", "none");
    }
    $(".sendBtn").click(function(){
        var comment = $("#commentText").val();
        var praise = "{$praise}";
        if(comment != ''){
            $.ajax({
                type:'post',
                dataType:'json',
                url:'/Wap/Praiseeat/comment_add?praise=' + praise,
                async: false,
                data:{
                    item_id: $("#item_id").val(),
                    comment: comment
                },
                success:function(res){
                    $(".alert").css("display", "block");
                    $(".spanClose").click();
                    if(res > 0){
                        $("#id").val(res);
                        $("#myModal1").modal("show");
                    }
                }
            });
        }else{

        }
        return false;
    });
</script>
</body>
</html>
